<!-- pages/index/index.vue -->
<template>
	<view class="container">
		<section>
			<!-- 1. 加载状态 -->
			<view v-if="isLoading" class="loading-tip">
				<text>正在加载动态...</text>
			</view>

			<!-- 2. 空状态 -->
			<view v-else-if="postList.length === 0" class="empty-tip">
				<text>一条动态都木有，快去"发布"吧！</text>
			</view>

			<!-- 3. 【核心】动态列表 -->
			<view v-else class="post-list">
				<!-- v-for 循环 "画" 出所有动态 -->
				<view class="post-card" v-for="item in postList" :key="item._id">

					<!-- 动态内容 -->
					<view class="post-content">
						<text>{{item.content}}</text>
					</view>

					<!-- 动态图片 (v-if 判断有图才显示) -->
					<image v-if="item.image_url" :src="item.image_url" mode="widthFix" class="post-image"
						@click="previewImage(item.image_url)"></image>

					<!-- 动态时间和点赞 -->
					<view class="post-footer">
						<text class="time">{{formatTime(item.publish_time)}}</text>
						<text class="like">❤️ {{item.like_count}}</text>
					</view>
				</view>
			</view>
		</section>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onShow
	} from '@dcloudio/uni-app'; // 【导入】生命周期

	const db = uniCloud.database();
	const postList = ref([]); // 存放所有动态的"篮子"
	const isLoading = ref(true); // 是否在加载中

	// 【核心】方法：从云端拉取数据
	const fetchPosts = async () => {
		console.log('开始拉取动态...');
		try {
			// 1. "get" 数据，并按时间 "desc" (降序) 排序
			const res = await db.collection('campus-posts')
				.orderBy('publish_time', 'desc')
				.get();

			// 2. 把数据倒进"篮子"
			postList.value = res.result.data;
			console.log('拉取成功:', postList.value);

		} catch (err) {
			console.error('拉取失败:', err);
			uni.showToast({
				title: '动态加载失败',
				icon: 'error'
			});
		} finally {
			isLoading.value = false;
			uni.stopPullDownRefresh(); // 【必须】停止下拉刷新的"菊花"
		}
	};

	// 【钩子】1. 页面第一次加载时，自动"拉取"
	onLoad(() => {
		fetchPosts();
	});

	// 【钩子】2. 页面下拉刷新时，再次"拉取"
	onPullDownRefresh(() => {
		isLoading.value = true; // 显示加载提示
		fetchPosts();
	});

	// 【钩子】3. (优化) 监听"发布成功"事件
	onShow(() => {
		// 这个事件是 post.vue 页面在 uni.switchTab 时 $emit 触发的
		uni.$once('post-success', () => {
			console.log('收到 post-success 事件，准备刷新');
			isLoading.value = true;
			fetchPosts();
		})
	});

	// 【工具】格式化时间戳 (可选)
	const formatTime = (timestamp) => {
		const date = new Date(timestamp);
		// 简单的格式化，真实项目可以用 day.js 库
		return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
	};

	// 【工具】点击图片预览 (可选)
	const previewImage = (url) => {
		uni.previewImage({
			urls: [url] // 必须是数组
		});
	};
</script>

<style>
	.container {
		background-color: #f4f4f4;
		min-height: 100vh;
	}

	.loading-tip,
	.empty-tip {
		text-align: center;
		padding-top: 100px;
		color: #999;
	}

	.post-list {
		padding: 10px;
	}

	.post-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.post-content {
		font-size: 30px;
		color: #00aaff;
		line-height: 1.6;
	}

	.post-image {
		width: 200px;
		border-radius: 5px;
		margin-top: 10px;
	}

	.post-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 13px;
		color: #999;
	}
</style>